<template>
	<view class="inDetail">
		<nav>
			<u-icon name="arrow-left" @click="skip" color="#333333" size="13"></u-icon>
			<b>订单详情</b>
		</nav>
		<p style="padding-bottom: 40rpx;">
			<!-- <image src="../../static/09.png"></image>{{detail.order_status_txt}} -->
		</p>
		<!-- <image v-if="detail.order_status == 2" src="../../static/17.png"></image>
		<image v-if="detail.order_status > 2 && detail.order_status < 5" src="../../static/182.png" mode=""></image>
		<image v-if="detail.order_status >= 5 && detail.order_status < 7" src="../../static/18.png"></image>
		<image v-if="detail.order_status == 7" src="../../static/181.png" mode=""></image>
		<button v-if="detail.order_status == 2" @click="cancel">取消订单</button> -->
		<view class="main">
			<view class="message" v-for="value in detail.order_record" :key="value.id">
				<view class="commodity">
					<nav>
						<span v-if="value.order_type!=0" >{{value.order_type==1?'加钟':'升级'}}</span>
						<image :src="$imgUrl + value.goods_image"></image>
					</nav>
					<view>
						<p>
							{{value.goods_name}}
							<image src="../../static/home/27.png"></image>
							<span>{{value.duration}}分钟</span>
						</p>
						<view>
							<p>服务时间：{{value.service_start_time}}</p>
						</view>
					</view>
					<footer>
						￥{{value.goods_price}}
					</footer>
				</view>
				<footer>
					<p><span>数量</span><span>×{{value.goods_num}}</span></p>
					<p v-if="value.order_type==0" ><span>交通费</span><span>￥{{value.traffic_fee}}</span></p>
					<p v-if="value.order_type!=2"><span>优惠劵</span><span>￥{{value.coupon_amount}}</span></p>
					<view v-if="value.order_type==0">
						<p>
							<image :src="detail.tech_avatar"></image>{{detail.tech_nick}}
						</p>
						<span><u-icon name="star-fill" color="#52C276" size="12"></u-icon>{{detail.tech_score}}</span>
					</view>
				</footer>
			</view>
			<view class="address">
				<main>
					<view>
						<image src="../../static/technician/741.png"></image>
						<view>
							<view>{{detail.address_detail}}</view>
							<p>{{detail.username}}<span>{{detail.user_mobile}}</span></p>
						</view>
					</view>
				</main>
			</view>
			<view class="fare">
				<h1>实付款(含车费)</h1>
				<!-- <p><span>交通费</span><span>￥{{detail.traffic_fee}}</span></p>
				<p><span>服务费</span><span>￥{{detail.service_fee}}</span></p>
				<p><span>优惠券金额</span><span>￥{{detail.coupon_amount}}</span></p> -->
				<p><span>总额</span><span>￥{{detail.total_amount}}</span></p>
			</view>
			<view class="fare actually_paid">
				<h1>订单详情</h1>
				<p><span>订单编号</span><span>{{detail.order_record[0].order_sn}}</span></p>
				<p><span>下单时间</span><span>{{detail.create_time}}</span></p>
				<p v-if="detail.order_status > 1"><span>支付时间</span><span>{{detail.order_record[0].pay_time}}</span></p>
				<p v-if="detail.order_status > 1"><span>支付方式</span><span>{{detail.pay_type == 1?'余额支付':'微信支付'}}</span></p>
				<p style="border-bottom: 0;"><span>备注</span><span>{{detail.remark}}</span></p>
			</view>
			<view class="reminder">
				<nav>
					<span></span>
					<p>下单须知</p><span></span>
				</nav>
				<image :src="$imgUrl + detail.order_notice" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_sn: "",
				detail: {},
				id: ''
			}
		},
		methods: {
			getOrderDetail(id) {
				this.$httpRequest('/order/getOrderDetail', {
					id: id
				}).then(res => {
					this.detail = res.data;
				});
			},
			skip() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 取消订单
			cancel() {
				uni.showModal({
					title: '取消订单',
					content: '您确定要取消订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.$httpRequest('/order/refuseorder', {
								id: this.id
							}).then(res => {
								this.getOrderDetail(this.order_sn);
							})
						} else if (res.cancel) {}
					}
				});
			},
		},
		onLoad(option) {
			this.order_sn = option.order_sn;
			this.getOrderDetail(this.order_sn);
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getOrderDetail(this.order_sn);
			uni.stopPullDownRefresh();
		},
	}
</script>

<style lang="less">
	.inDetail {
		background: linear-gradient(180deg, #53C277 0%, #81E2A8 100%);
		width: 100vw;
		min-height: 100vh;
		padding-top: 88rpx;
		box-sizing: border-box;

		&>nav {
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 18px;
			color: #2A2A2A;
			position: relative;

			&>.u-icon {
				position: absolute;
				top: 50%;
				left: 30rpx;
				transform: translateY(-50%);
			}
		}

		&>p {
			color: #fff;
			font-size: 15px;
			display: flex;
			justify-content: center;

			&>image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 26rpx;
			}
		}

		&>image {
			width: 620rpx;
			height: 188rpx;
			display: block;
			margin: 20rpx auto 44rpx;
		}

		&>button {
			width: 162rpx;
			height: 58rpx;
			border-radius: 29rpx;
			border: 1px solid #fff;
			color: #fff;
			background: #ffffff00;
			line-height: 58rpx;
			font-size: 15px;
			padding: 0;
			margin: 0 auto 40rpx;
		}

		&>.main {
			width: 100%;
			min-height: calc(100vh - 483rpx);
			background: #F0F0F0;
			border-radius: 32rpx 32rpx 0 0;
			padding-top: 26rpx;

			&>.reminder {
				width: 690rpx;
				border-radius: 20rpx;
				margin: 20rpx auto;
				padding: 20rpx;
				box-sizing: border-box;
				color: #333;
				background: #fff;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;

				&>image {
					width: 100%;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>nav {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
					font-size: 12px;

					&>p {
						margin: 0 44rpx;
					}

					&>span {
						width: 120rpx;
						height: 1px;
						background: #6D6D6D;
					}
				}
			}



			&>.fare {
				width: 690rpx;
				border-radius: 20rpx;
				margin: 20rpx auto;
				padding: 20rpx;
				box-sizing: border-box;
				color: #333;
				background: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				&>h1 {
					font-size: 15px;
				}

				&>p {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666666;
					font-size: 11px;
					margin-top: 16rpx;
				}
			}

			&>.actually_paid {
				height: 300rpx;

				&>p {
					height: 56rpx;
					align-items: center;
					border-bottom: 1px solid #E2E2E2;
				}
			}

			&>.address {
				width: 690rpx;
				border-radius: 20rpx;
				margin: 20rpx auto;
				padding: 20rpx;
				box-sizing: border-box;
				color: #333;
				background: #fff;

				&>main {
					width: 100%;
					display: flex;
					justify-content: space-between;

					&>view {
						display: flex;

						&>image {
							width: 26rpx;
							height: 34rpx;
							margin: 8rpx 20rpx;
						}

						&>view {
							&>view {
								width: 482rpx;
								font-size: 13px;
							}

							&>p {
								font-size: 11px;
								color: #666666;
								display: flex;
								margin-top: 8rpx;

								&>span {
									margin-left: 40rpx;
								}
							}
						}

					}
				}
			}

			&>.message {
				width: 690rpx;
				background: #fff;
				margin: 0 auto;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				&>footer {
					padding: 0 16rpx;
					box-sizing: border-box;

					&>view {
						width: 100%;
						height: 76rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&>p {
							font-size: 15px;
							display: flex;
							align-items: center;

							&>image {
								width: 52rpx;
								height: 52rpx;
								border-radius: 50%;
								margin-right: 10rpx;
								image-rendering: -moz-crisp-edges;
								image-rendering: -o-crisp-edges;
								image-rendering: -webkit-optimize-contrast;
								image-rendering: crisp-edges;
								-ms-interpolation-mode: nearest-neighbor;
							}
						}

						&>span {
							display: flex;
							align-items: center;

							&>.u-icon {
								transform: translateY(5rpx);
								margin-right: 5rpx;
							}
						}
					}

					&>p {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 56rpx;
						font-size: 10px;
						color: #9E9E9E;
						border-bottom: 1px solid #E2E2E2;
					}
				}

				&>.commodity {
					width: 100%;
					height: 136rpx;
					display: flex;
					align-items: center;
					
					&>nav{
						width: 176rpx;
						height: 112rpx;
						border-radius: 10rpx;
						margin: 10rpx;
						overflow: hidden;
						position: relative;
						&>span{
							font-size: 8px;
							background-color: #52C276;
							padding: 2rpx 10rpx;
							border-radius: 10rpx 0 10rpx 0;
							color: #fff;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 2;
						}
						&>image {
							width: 176rpx;
							height: 112rpx;
							image-rendering: -moz-crisp-edges;
							image-rendering: -o-crisp-edges;
							image-rendering: -webkit-optimize-contrast;
							image-rendering: crisp-edges;
							-ms-interpolation-mode: nearest-neighbor;
						}
					}

					&>footer {
						color: #52C276;
						font-size: 15px;
						margin-left: 60rpx;
					}

					&>view {
						margin-right: 30rpx;


						&>view {
							color: #9E9E9E;
							font-size: 8px;
							display: flex;
							align-items: flex-end;
							margin-top: 10rpx;

							&>p {
								color: #9E9E9E;
								font-size: 10px;
								margin-right: 20rpx;
							}
						}

						&>p {
							font-size: 13px;
							color: #333333;

							&>image {
								width: 20rpx;
								height: 20rpx;
								margin: 0 10rpx 0 28rpx;
							}

							&>span {
								font-size: 8px;
								color: #9E9E9E;
							}
						}
					}
				}
			}
		}
	}
</style>